"use client";

export function TestTailwind() {
  return (
    <div className="p-8 max-w-md mx-auto">
      <h1 className="text-3xl font-bold text-blue-600 mb-4">Tailwind CSS 测试</h1>
      
      <div className="bg-green-100 text-green-800 p-4 rounded-lg mb-4">
        绿色背景框
      </div>
      
      <div className="bg-red-100 text-red-800 p-4 rounded-lg mb-4">
        红色背景框
      </div>
      
      <div className="flex space-x-4 mb-4">
        <div className="bg-blue-500 text-white p-2 rounded">Item 1</div>
        <div className="bg-purple-500 text-white p-2 rounded">Item 2</div>
        <div className="bg-yellow-500 text-white p-2 rounded">Item 3</div>
      </div>
      
      <button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded transition duration-300">
        按钮
      </button>
    </div>
  );
} 